{% extends 'base.html' %}
{% load static %}

{% block title %}{{ idc.name }} - 详情{% endblock %}

{% block content %}
<div class="container">
    <div class="row mb-4">
        <div class="col">
            <h2>{{ idc.name }}</h2>
            <p class="text-muted">
                位置：{{ idc.location }}<br>
                创建时间：{{ idc.created_at|date:"Y-m-d H:i" }}
            </p>
            <p>{{ idc.description }}</p>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col">
            <div class="d-flex justify-content-between align-items-center">
                <h3>机柜列表</h3>
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" 
                        data-bs-target="#addRackModal"
                        data-idc-id="{{ idc.id }}"
                        data-idc-name="{{ idc.name }}">
                    添加机柜
                </button>
            </div>
        </div>
    </div>

    <div class="row">
        {% for rack in racks %}
        <div class="col-md-4 mb-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">{{ rack.name }}</h5>
                    <div class="card-text">
                        <p>位置编号：{{ rack.position }}</p>
                        <p>状态：<span class="badge {% if rack.status == 'normal' %}bg-success
                                     {% elif rack.status == 'warning' %}bg-warning
                                     {% elif rack.status == 'error' %}bg-danger
                                     {% else %}bg-info{% endif %}">
                            {{ rack.get_status_display }}
                        </span></p>
                        <div class="mb-2">
                            <small class="text-muted">空间使用率</small>
                            <div class="progress">
                                <div class="progress-bar {% if rack.get_usage_percentage > 90 %}bg-danger
                                                        {% elif rack.get_usage_percentage > 70 %}bg-warning
                                                        {% else %}bg-success{% endif %}"
                                     role="progressbar"
                                     style="width: {{ rack.get_usage_percentage }}%"
                                     aria-valuenow="{{ rack.get_usage_percentage }}"
                                     aria-valuemin="0"
                                     aria-valuemax="100">
                                    {{ rack.get_usage_percentage|floatformat:1 }}%
                                </div>
                            </div>
                        </div>
                        <div class="mb-2">
                            <small class="text-muted">电力使用率</small>
                            <div class="progress">
                                <div class="progress-bar {% if rack.get_power_percentage > 90 %}bg-danger
                                                        {% elif rack.get_power_percentage > 70 %}bg-warning
                                                        {% else %}bg-success{% endif %}"
                                     role="progressbar"
                                     style="width: {{ rack.get_power_percentage }}%"
                                     aria-valuenow="{{ rack.get_power_percentage }}"
                                     aria-valuemin="0"
                                     aria-valuemax="100">
                                    {{ rack.get_power_percentage|floatformat:1 }}%
                                </div>
                            </div>
                        </div>
                        <p>
                            <small class="text-muted">
                                温度：{{ rack.temperature }}°C<br>
                                湿度：{{ rack.humidity }}%
                            </small>
                        </p>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-sm btn-info" data-bs-toggle="modal"
                                data-bs-target="#editRackModal"
                                data-rack-id="{{ rack.id }}">
                            编辑
                        </button>
                        <button type="button" class="btn btn-sm btn-danger" data-bs-toggle="modal"
                                data-bs-target="#deleteRackModal"
                                data-rack-id="{{ rack.id }}"
                                data-rack-name="{{ rack.name }}">
                            删除
                        </button>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col">
            <div class="alert alert-info">
                暂无机柜信息，请点击"添加机柜"按钮添加。
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<!-- 添加机柜模态框 -->
<div class="modal fade" id="addRackModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加机柜</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="post" action="{% url 'add_rack' %}">
                <div class="modal-body">
                    {% csrf_token %}
                    <input type="hidden" id="idc-id" name="idc_id" value="{{ idc.id }}">
                    <div class="mb-3">
                        <label class="form-label">所属机房</label>
                        <input type="text" class="form-control" value="{{ idc.name }}" readonly>
                    </div>
                    <div class="mb-3">
                        <label for="rack-name" class="form-label">机柜名称</label>
                        <input type="text" class="form-control" id="rack-name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="rack-position" class="form-label">位置编号</label>
                        <input type="text" class="form-control" id="rack-position" name="position" required>
                    </div>
                    <div class="mb-3">
                        <label for="rack-capacity" class="form-label">容量(U)</label>
                        <input type="number" class="form-control" id="rack-capacity" name="capacity" value="42" required>
                    </div>
                    <div class="mb-3">
                        <label for="rack-power-capacity" class="form-label">电力容量(W)</label>
                        <input type="number" class="form-control" id="rack-power-capacity" name="power_capacity" value="2000" required>
                    </div>
                    <div class="mb-3">
                        <label for="rack-x-position" class="form-label">X坐标</label>
                        <input type="number" class="form-control" id="rack-x-position" name="x_position" step="0.1" required>
                    </div>
                    <div class="mb-3">
                        <label for="rack-y-position" class="form-label">Y坐标</label>
                        <input type="number" class="form-control" id="rack-y-position" name="y_position" step="0.1" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 编辑机柜模态框 -->
<div class="modal fade" id="editRackModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑机柜</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="post" action="{% url 'edit_rack' 0 %}" id="editRackForm">
                <div class="modal-body">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label class="form-label">所属机房</label>
                        <input type="text" class="form-control" value="{{ idc.name }}" readonly>
                    </div>
                    <div class="mb-3">
                        <label for="edit-rack-name" class="form-label">机柜名称</label>
                        <input type="text" class="form-control" id="edit-rack-name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="edit-rack-position" class="form-label">位置编号</label>
                        <input type="text" class="form-control" id="edit-rack-position" name="position" required>
                    </div>
                    <div class="mb-3">
                        <label for="edit-rack-capacity" class="form-label">容量(U)</label>
                        <input type="number" class="form-control" id="edit-rack-capacity" name="capacity" required>
                    </div>
                    <div class="mb-3">
                        <label for="edit-rack-power-capacity" class="form-label">电力容量(W)</label>
                        <input type="number" class="form-control" id="edit-rack-power-capacity" name="power_capacity" required>
                    </div>
                    <div class="mb-3">
                        <label for="edit-rack-x-position" class="form-label">X坐标</label>
                        <input type="number" class="form-control" id="edit-rack-x-position" name="x_position" step="0.1" required>
                    </div>
                    <div class="mb-3">
                        <label for="edit-rack-y-position" class="form-label">Y坐标</label>
                        <input type="number" class="form-control" id="edit-rack-y-position" name="y_position" step="0.1" required>
                    </div>
                    <div class="mb-3">
                        <label for="edit-rack-status" class="form-label">状态</label>
                        <select class="form-select" id="edit-rack-status" name="status" required>
                            <option value="normal">正常</option>
                            <option value="warning">警告</option>
                            <option value="error">错误</option>
                            <option value="maintenance">维护中</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="edit-rack-temperature" class="form-label">温度(°C)</label>
                        <input type="number" class="form-control" id="edit-rack-temperature" name="temperature" step="0.1" required>
                    </div>
                    <div class="mb-3">
                        <label for="edit-rack-humidity" class="form-label">湿度(%)</label>
                        <input type="number" class="form-control" id="edit-rack-humidity" name="humidity" step="0.1" required>
                    </div>
                    <div class="mb-3">
                        <label for="edit-rack-power-usage" class="form-label">当前功率(W)</label>
                        <input type="number" class="form-control" id="edit-rack-power-usage" name="power_usage" step="0.1" required>
                    </div>
                    <div class="mb-3">
                        <label for="edit-rack-used-units" class="form-label">已使用U数</label>
                        <input type="number" class="form-control" id="edit-rack-used-units" name="used_units" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">保存更改</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 删除机柜确认模态框 -->
<div class="modal fade" id="deleteRackModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>确定要删除机柜 "<span id="delete-rack-name"></span>" 吗？此操作不可恢复。</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <form method="post" action="{% url 'delete_rack' 0 %}" id="deleteRackForm" style="display: inline;">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger">确认删除</button>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
    // 处理删除机柜模态框
    const deleteRackModal = document.getElementById('deleteRackModal');
    deleteRackModal.addEventListener('show.bs.modal', function(event) {
        const button = event.relatedTarget;
        const rackId = button.getAttribute('data-rack-id');
        const rackName = button.getAttribute('data-rack-name');
        
        document.getElementById('delete-rack-name').textContent = rackName;
        document.getElementById('deleteRackForm').action = "{% url 'delete_rack' 0 %}".replace('0', rackId);
    });

    // 处理编辑机柜模态框
    const editRackModal = document.getElementById('editRackModal');
    editRackModal.addEventListener('show.bs.modal', function(event) {
        const button = event.relatedTarget;
        const rackId = button.getAttribute('data-rack-id');
        const form = document.getElementById('editRackForm');
        form.action = "{% url 'edit_rack' 0 %}".replace('0', rackId);
        
        // 获取机柜信息并填充表单
        fetch(`/rack/${rackId}/info/`, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                const rackData = data.data;
                // 填充表单字段
                document.getElementById('edit-rack-name').value = rackData.name;
                document.getElementById('edit-rack-position').value = rackData.position;
                document.getElementById('edit-rack-capacity').value = rackData.capacity;
                document.getElementById('edit-rack-power-capacity').value = rackData.power_capacity;
                document.getElementById('edit-rack-x-position').value = rackData.x_position;
                document.getElementById('edit-rack-y-position').value = rackData.y_position;
                document.getElementById('edit-rack-status').value = rackData.status;
                document.getElementById('edit-rack-temperature').value = rackData.temperature;
                document.getElementById('edit-rack-humidity').value = rackData.humidity;
                document.getElementById('edit-rack-power-usage').value = rackData.power_usage;
                document.getElementById('edit-rack-used-units').value = rackData.used_units;
            } else {
                console.error('获取机柜信息失败');
                alert('获取机柜信息失败，请重试');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('获取机柜信息时发生错误，请重试');
        });
    });
</script>
{% endblock %} 